import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Tooltip,
  Rate,
  Checkbox,
  Tabs,
  Tag,
  Tree,
} from 'antd';
import MyIcon from '@/components/MyIcon';
import OrgTree from './OrgTree/OrgTree';
import UserTransfer from './Transfer/Transfer';
import styles from './Add.less';

const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;
const { TabPane } = Tabs;
const { TreeNode } = Tree;

@connect(({ role }) => ({
  treeData: role.treeData,
  orgTree: role.orgTree,
  // groupList: role.groupList,
}))
@Form.create()
class Add extends PureComponent {
  state = {
    selectedOrgKeys: [],
  };

  handleTreeCheck = (checkedKeys, e) => {
    this.props.onOrgTreeChcek && this.props.onOrgTreeChcek(checkedKeys, e);
  };

  handleTreeNodeSelect = selectedKeys => {
    this.setState({
      selectedOrgKeys: selectedKeys,
    });
  };

  handleGroupOnChange = checkedKeys => {
    this.props.onGroupCheck && this.props.onGroupCheck(checkedKeys);
  };

  renderOrgTree = () => {
    const { selectedOrgKeys } = this.state;
    const { orgTree, checkedOrgKeys } = this.props;
    return (
      <div className={styles.tree}>
        <OrgTree
          checkStrictly={true}
          checkable={true}
          checkedKeys={checkedOrgKeys}
          onCheck={this.handleTreeCheck}
          selectedKeys={selectedOrgKeys}
          onTreeNodeSelect={this.handleTreeNodeSelect}
          orgTree={orgTree}
        />
      </div>
    );
  };

  // renderGroupChcekbox = () => {
  //   const { groupList, checkedGroupKeys } = this.props;
  //   return (
  //     <CheckboxGroup value={checkedGroupKeys} onChange={this.handleGroupOnChange}>
  //       <ul className={styles.addGroup}>
  //         {groupList.map(item => {
  //           return (
  //             <li className={styles.checkbox} key={item.id}>
  //               <Checkbox value={item.id} key={item.id}>
  //                 <span>
  //                   <MyIcon className={styles.myIcon} type="iconoss---yonghuzu" />
  //                   {item.shortName}
  //                 </span>
  //               </Checkbox>
  //             </li>
  //           );
  //         })}
  //       </ul>
  //     </CheckboxGroup>
  //   );
  // };

  renderUserTransfer = () => {
    const { targetUserKeys, onTargetChange, orgTree } = this.props;
    return (
      <UserTransfer orgTree={orgTree} targetKeys={targetUserKeys} onTargetChange={onTargetChange} />
    );
  };

  render() {
    const { addType } = this.props;
    return (
      <div className={styles.addContent}>
        {addType === '1' && this.renderUserTransfer()}
        {/* {addType === '2' && this.renderGroupChcekbox()} */}
        {/* {addType === '3' && this.renderOrgTree()} */}
      </div>
    );
  }
}

export default Add;
